<template>
  <section class="cell-box">
    <div class="cell-left">
      <slot name="left"></slot>
    </div>
    <div class="cell-middle">
      <slot name="middle"></slot>
    </div>
    <div class="cell-right">
      <slot name="right"></slot>
    </div>
  </section>
</template>

<style lang="less">
  .cell-box {
    display: flex;
    min-height: 20px;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
  }
  .cell-middle {
    flex: 1;
    display: flex;
    width: 1px;
  }
  .cell-left {
    flex-shrink: 0;
  }
  .cell-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
</style>

<script lang="ts">
  import {VueComponent, Component, Prop} from "modules";

  @Component
  export default class Cell extends VueComponent {}
</script>